<template>
  <div v-transfer-dom>
    <popup
      v-model="showPopup"
      :show-mask="showMask"
      :popup-style="{
        zIndex: 999
      }"
      @on-hide="toggle(false)"
      @on-show="toggle(true)"
      class="wrapper"
      ref="wrapper">
      <div :style="{paddingBottom: softHeight + 'px'}">
        <slot name="default">
          <div class="input-wrapper" ref="bottom" :style="{paddingBottom: (paddingBottom + extraPadding + 9) + 'px'}">
            <div class="v-input">
              <textarea ref="input" v-model="inputValue" :placeholder="placeholder" @click.stop="clickInput" autofocus></textarea>
            </div>
            <p class="btn" @click.stop="send">发送</p>
          </div>
        </slot>
      </div>
    </popup>
  </div>
</template>

<script>
import { TransferDom, Popup } from 'vux'
import { isIphoneX, isIOS } from '@/assets/js/brower'

export default {
  model: {
    prop: 'value',
    event: 'toggle'
  },
  props: {
    value: Boolean,
    showMask: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: '请输入...'
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Popup
  },
  data () {
    return {
      showPopup: this.value,
      softHeight: 0,
      inputValue: ''
    }
  },
  created () {
    this.statusBarHeight = 24
    this.paddingBottom = 0
    this.extraPadding = 0
    if (isIphoneX()) {
      this.statusBarHeight = 44
      this.paddingBottom = 34
    }
    if (isIOS()) {
      this.extraPadding = 15
    }
    window._Native_heightChange = (height, visibleHeight) => {
      // IOS会自己顶上去,需要始终可见
      // this.$refs.wrapper.style.position = 'fixed'
      this.$refs.bottom.style.position = 'relative'
      this.$refs.bottom.scrollIntoView()
      this.$refs.bottom.scrollIntoViewIfNeeded()
      // if (!isIOS()) {
      // 软键盘的收缩导致的高度变化。Android同样处理
      const scale = height / window.innerHeight // 1px在移动端所占像素点
      if ((height - visibleHeight) / scale <= this.statusBarHeight) {
        this.softHeight = 0
      } else {
        this.softHeight = (height - visibleHeight) / scale - this.statusBarHeight
      }
      // }
    }
  },
  mounted() {
    this.autoTextarea(63, 0)
  },
  methods: {
    toggle (val) {
      this.$emit('toggle', val)
    },
    setContent(val) {
      this.inputValue = val
    },
    send () {
      this.$emit('send', this.inputValue)
    },
    clickInput (e) {
      // 处理IOS获取焦点光标
      this.$refs.input.focus()
    },
    autoTextarea (maxHeight, extra) {
      // textarea自适应高度
      const elem = this.$refs.input
      extra = extra || 0
      const isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window
      const isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera')
      const addEvent = function (type, callback) {
        elem.addEventListener ? elem.addEventListener(type, callback, false) : elem.attachEvent('on' + type, callback)
      }
      const getStyle = elem.currentStyle ? function (name) {
        var val = elem.currentStyle[name]
        if (name === 'height' && val.search(/px/i) !== 1) {
          var rect = elem.getBoundingClientRect()
          return rect.bottom - rect.top - parseFloat(getStyle('paddingTop')) - parseFloat(getStyle('paddingBottom')) + 'px'
        }
        return val
      } : function (name) {
        return getComputedStyle(elem, null)[name]
      }
      const minHeight = 22
      elem.style.resize = 'none'
      const change = function () {
        let height
        let padding = 0
        let style = elem.style
        if (elem._length === elem.value.length) return
        elem._length = elem.value.length
        if (!isFirefox && !isOpera) {
          padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'))
        }

        elem.style.height = minHeight + 'px'
        if (elem.scrollHeight > minHeight) {
          if (maxHeight && elem.scrollHeight > maxHeight) {
            height = maxHeight - padding
            style.overflowY = 'visible'
          } else {
            height = elem.scrollHeight - padding
            style.overflowY = 'hidden'
          };
          style.height = height + extra + 'px'
          elem.currHeight = parseInt(style.height)
        }
      }
      addEvent('propertychange', change)
      addEvent('input', change)
      addEvent('focus', change)
      change()
    }
  },
  watch: {
    value (val) {
      if (val === true && this.showMask === true) {
        setTimeout(() => {
          this.$refs.input.click()
          this.$refs.input.focus()
        }, 20)
      }
      this.showPopup = val
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/css/variable.styl'

  .wrapper {
    position fixed
    .input-wrapper {
      padding: 9px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .v-input {
        border-radius: 23px;
        padding: 0 15px;
        width: calc(100% - 90px);
        box-shadow: 0 0 6px $color-border;
        background: #fff;
        overflow: hidden;
        textarea {
          border: inherit;
          width: 100%;
          height: 100%;
          padding: 3px 0;
          transform: translateY(4px);
          overflow: hidden;
          font-size: $font-size-desc;
          &:focus {
            outline: none
          }
        }
      }
      .btn {
        font-size: $font-size-title;
        color: #999;
        padding: 3px 12px;
        &:hover, &:focus  {
          color: $color-theme
        }
      }
    }
  }
</style>
